import { Image, StyleSheet, Text, View } from 'react-native'
import React, { useState, useEffect } from 'react'

interface Props {
  /** 图片地址 */
  uri: string
  /** 图片宽度 */
  showWidth: number
}
const ResizeImage: React.FC<Props> = ({ uri, showWidth }) => {
  // 图片显示高度
  const [showHeight, setShowHeight] = useState(0)
  useEffect(() => {
    Image.getSize(uri, (width, height) => {
      setShowHeight((showWidth * height) / width)
    })
  }, [uri])

  return (
    <Image
      source={{ uri }}
      style={{
        width: showWidth,
        height: showHeight,
        resizeMode: 'cover'
      }}
    ></Image>
  )
}

export default ResizeImage
